<template>
    <div class="geo-location">
        <input type="search" name="" id="" v-model="city"
        placeholder="请输入城市名称" @change="getData()">  
    </div>
</template>
<script>
import axios from 'axios'
import { API_CITY,KEY } from '../common/constrant';
//import { mapMutations } from 'vuex'
//import { mapActions } from 'vuex'
export default {
    data(){
        return{
            "city":""
        }
    },
    methods:{
        // ...mapMutations([
        //     "updateLocationMutation"
        // ]),
        // ...mapActions([
        //     "updateLocationAction"
        // ]),
        getData(){
            axios.get(API_CITY,{
                params:{
                    key:KEY,
                    location:this.city
                }
            }).then(res => {
                console.log(res.data)
                //通过dispatch修改状态的state
                this.$store.dispatch("updateLocationAction",res.data.location[0])
                //使用mapActions辅助函数，将this.increment() 映射为 this.$store.commit(increment)
                //this.updateLocationAction(res.data.location[0])
                //此方法是越过了action直接从vue component组件commit提交mutation
                //this.$store.commit("updateLocationMutation",res.data.location[0])
                //使用mapMutations函数，可以将this.increment() 映射为 this.$store.commit(increment)
                //this.updateLocationMutation(res.data.location[0])
                console.log(this.$store.state.location)//直接commit提交mutation
            })
        }
    },
    // mounted(){
    //     this.getData()
    // }
}
</script>
<style scoped>

</style>
